<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布-浮生若梦</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">

    <!--自定义css-->
    <link rel="stylesheet" type="text/css" href="css/background.css"/>

    <!--下拉式多选框-->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/bootstrap-select/bootstrap-select.min.css">
    <!--代码高亮css-->
    <link href="http://cdn.bootcss.com/highlight.js/9.8.0/styles/github-gist.min.css" rel="stylesheet" type="text/css">


    <!--jquery-->
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="js/bootstrap-select/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="js/bootstrap-select/defaults-zh_CN.min.js"></script>

    <!--bootstrap-->
    <script src="js/bootstrap.min.js"></script>
    <!--wangEditor-->
    <script type="text/javascript" src="js/wangeditor/wangEditor.min.js"></script>
    <!--代码高亮-->
    <script type="text/javascript" src="js/highlight.min.js"></script>
    <!--<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>-->

    <style>
        .bodyStyle {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background: url("img/nier-gaosi.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /*解决富文本编辑器层级太高问题*/
        .w-e-menu {
            z-index: 2!important;
        }
        .w-e-text-container {
            z-index: 1!important;
        }
        .w-e-toolbar {
            z-index: 2!important;
        }
    </style>
</head>
<body class="bodyStyle">
<div th:replace="part/nav ::nav"></div>
<div class="container col-md-8 col-md-offset-2 formStyle" style="margin-top: 4%;margin-bottom: 3%">
    <form action="/sendPost.htm" method="post" id="post_form">
        <div class="form-group">
            <div class="row">
                <div class="form-group col-sm-4">
                    <div>
                        <select id="moduleId" name="moduleId" class="form-control selectpicker" multiple data-live-search="true" data-max-options="4">
                            <option th:each="label:${labels}" th:value="${label.id}" th:text="${label.label}">出错了</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-sm-8">
                        <input type="text" class="form-control " id="title" name="title" placeholder="请输入标题">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div>
                <input type="text" class="form-control" id="detail" name="detail" placeholder="请输入描述">
            </div>
        </div>
        <input type="text" hidden="hidden" id="content" name="content" value="">
        <div>
            <div name="editor" id="editor"></div>
        </div>
        <div align="right" style="margin-top: 3%">
            <button class="btn btn-info" type="button" id="view_btn" onclick="preview()">预览&nbsp;<span
                    class="glyphicon glyphicon-eye-open"></span></button>
            &nbsp;
            <button class="btn btn-primary" type="button" id="sub_btn" onclick="sub_form()">提交&nbsp;<span
                    class="glyphicon glyphicon-ok"></span></button>
        </div>
    </form>
</div>
<script>
    // 以下是富文本编辑器配置
    const E = window.wangEditor
    // 或者 const Editor = new E( document.getElementById('div1') )
    const editor = new E('#editor')
    // 配置菜单栏，设置不需要的菜单
    /*Editor.config.excludeMenus = [

    ]*/
    //开启代码高亮
    editor.highlight=hljs
    //是否开启全屏按钮
    editor.config.showFullScreen = false
    //自定义菜单顺序
    editor.config.menus = [
        'bold',
        'italic',
        'head',
        'fontSize',
        'fontName',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        'emoticon',
        'image',
        'video',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo',
    ]
    //设置图片上传
    editor.config.uploadFileName='file'
    editor.config.uploadImgServer='/uploadImg.htm'
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
    editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 2M
    editor.config.uploadImgMaxLength = 1 // 一次最多上传 1 个图片
    //创建富文本编辑器
    editor.create()

    $(function () {
        $("#moduleId").selectpicker();
    });

    // //使用refresh方法更新UI以匹配新状态。
    // $('.selectpicker').selectpicker('refresh');
    // //render方法强制重新渲染引导程序 - 选择ui。
    // $('.selectpicker').selectpicker('render');
    $('#moduleId').selectpicker('refresh');
    $('#moduleId').selectpicker('render');

    //预览界面
    function preview() {
        var preWin = window.open('about:blank', 'preview');
        preWin.document.write('<meta name="google" value="notranslate"><link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><style>.panel img{max-width:100% !important;height:auto !important;}.panel{margin-top:20px;}</style>');
        preWin.document.write('<div class="container-fluid"><div class="row"><div class="col-sm-8 col-sm-offset-2"><div class="panel panel-default"><div class="panel-heading">内容预览</div><div class="panel-body">' + editor.sync() + '</div><div class="panel-footer"><a href="javascript:;" class="btn btn-link" onclick="window.close();">关闭预览</a></div></div></div></div></div>');
        preWin.document.write('<link href="http://cdn.bootcss.com/highlight.js/9.8.0/styles/github-gist.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/highlight.js/9.8.0/highlight.min.js"></scr' + 'ipt><script>hljs.initHighlightingOnLoad();</scr' + 'ipt>');
        preWin.document.close();
    }

    //提交内容
    function sub_form() {
        $('#content').val(editor.txt.html());
        document.getElementById("post_form").submit();
    }
</script>
</body>
</html>